<template>
  <el-dialog
    :close-on-click-modal="false"
    width="35%"
    :title="title"
    :visible.sync="visible"
    :before-close="close"
    lock-scroll
    append-to-body
  >
    <el-form status-icon :rules="rules" :model="datas" @keyup.enter.native="save" ref="editForm">
      <el-row :gutter="10">
        <el-col :span="23">
          <!-- <el-form-item prop="name" label="管理员" :label-width="baseStyle.width">
            <el-input v-model="datas.name" :readonly="false" autocomplete="off"></el-input>
          </el-form-item>-->
          <el-form-item prop="name" label="管理员" :label-width="baseStyle.width">
            <el-select
              v-model="datas.name"
              collapse-tags
              placeholder="请输入关键字搜索"
              style="width: 100%;"
              filterable
              remote
              :remote-method="(val)=>{getUserList(val)}"
              :loading="loading"
            >
              <el-option
                v-for="(item,index) in userDatas"
                :key="item.id+'qww'+index"
                :label="item.realname"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :type="'primary'" :loading="saveLoading" @click.native="save()">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";
import API from "@apis/newProject";

export default {
  name: "ClassicForm",
  props: {
    visible: Boolean,
    baseStyle: Object,
    title: String,
    datas: {
      type: Object,
      default: function() {
        return { name: "" };
      }
    },
    saveForm: Function
  },
  data() {
    const rules = this.getRules();
    return {
      saveLoading:false,
      loading: false,
      rules,
      userDatas: []
    };
  },
  computed: {},
  created() {},
  methods: {
    async getUserList(word = "") {
      if (word == "") {
        return;
      }
      this.loading = true;
      await API.getUserList({ page: this.userPage, keyword: word })
        .then(res => {
          let oldIDs = this.userDatas && this.userDatas.map(item => item.id);
          let newData = [...res.data, ...this.userDatas];
          newData.forEach(item => {
            if (oldIDs.indexOf(item.id) < 0) {
              this.userDatas.unshift(item);
            }
          });
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    cancel() {
      this.saveLoading = false;
      this.$emit("update:visible", false);
      this.$refs.editForm.resetFields();
    },
    close() {
      this.cancel();
    },
    save() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          let datas = this.userDatas.filter(
            item => item.id === this.datas.name
          );
          this.saveLoading = true;
          this.$emit("saveForm", { ...datas[0] });
          // this.cancel();
        } else {
          return false;
        }
      });
    },
    getRules() {
      return {
        name: [
          {
            validator: (rule, value, callback) => {
              if (!this.datas.name) {
                callback(new Error(`请选择管理员`));
                return;
              }
              if (this.datas.name.length < 1) {
                callback(new Error(`请选择管理员`));
                return;
              }
              callback();
            },
            trigger: "blur"
          }
        ]
      };
    }
  }
};
</script>
<style lang="scss" scoped>
</style>